<template>
    <div>
        <el-steps :active="0" simple>
            <el-step title="学生自评申请"></el-step>
            <el-step title="班级审核"></el-step>
            <el-step title="班内公示"></el-step>
            <el-step title="学院复审"></el-step>
            <el-step title="学校核定"></el-step>
        </el-steps>
        <div style="width: 60%;">
            <el-descriptions title="" :column=3 :colon=false style="margin-top:5%">
                <el-descriptions-item label="自评分数：">100</el-descriptions-item>
                <el-descriptions-item label="班委评分：">100</el-descriptions-item>
                <el-descriptions-item label="综测班级排名：">4</el-descriptions-item>
                <el-descriptions-item label="学业绩点：">3.5</el-descriptions-item>
                <el-descriptions-item label="绩点排名：">3</el-descriptions-item>
                <el-descriptions-item label="不及格科目数：">3</el-descriptions-item>
                <el-descriptions-item label=''></el-descriptions-item>
            </el-descriptions>
            <div class="right">
                <!-- <div class="shenhe" >已审核人数：5</div> -->
                <!-- <div class="shenhe" >待审核人数：2</div> -->
                <!-- <div class="shenhe"
                style="background-color:blue;position: absolute;margin-top:35px;margin-right: -200px;color: aliceblue; font-size: 16px;">
                提交
            </div>padding: 25px; -->
                <el-button
                    style="background-color:rgb(64,149,229);position: relative;color: aliceblue; font-size: 16px;"
                    @click="submitData">提交</el-button>
            </div>
        </div>
        <!-- <el-descriptions  column = 1 labelstyle="{margin-left:auto}">
            <el-descriptions-item label="已审核人数">5</el-descriptions-item>
            <el-descriptions-item label="待审核人数" >2</el-descriptions-item>
        </el-descriptions> -->

        <!-- 各项分数表格 -->
        <div style="display: flex;flex-direction: column; height: 100%;">
            <!-- 智育分 -->
            <template class="form1" style="flex:1;">
                <!-- <h2 class="add" style="background-color:blue;color: aliceblue; font-size: 16px; margin-bottom: -50px;">
                    +增添细则</h2>  margin-bottom: -40px;-->
                <el-button class="add" style="background-color:blue;color: aliceblue; font-size: 16px;width: 120px;"
                    @click="addData">
                    +增添细项
                </el-button>
                <el-dialog style="width: 100%;height: 1000px;" title="增添细项" :visible.sync="dialogVisiable"
                    :show-close="false">
                    <el-form :model="form">
                        <!-- <el-form-item label="细项名称" width="80px">
                            <el-input class="dialog_input" v-model="form.xx_name"></el-input>
                        </el-form-item> -->
                        <el-form-item label="细项名称" width="80px">
                            <el-select class="dialog_input1" v-model="form.xx_name" placeholder="请选择">
                                <el-option label="基础分" value="基础分"></el-option>
                                <el-option label="附加分" value="附加分"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="内容说明" width="80px">
                            <el-input class="dialog_input2" v-model="form.content_sm"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                :before-remove="beforeRemove" multiple>
                                <el-button size="small" type="primary">上传证明材料</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="Zysubmit">确 定</el-button>
                        <el-button @click="dialogVisiable = false">取 消</el-button>
                    </div>
                </el-dialog>
                <h3 style="font-size: 15px;text-align: center;">“智育分”（60%）模块综合评定</h3>
                <el-table :data="ZyData" border v-loading=false style="width:100%" :fit=false>
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xx_name" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="content_sm" label="内容说明" width="280">
                    </el-table-column>
                    <el-table-column prop="evi_mat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sug_score" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_self_score" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_bw_score" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_new_time" label="更新时间" width="100">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination layout="prev, pager, next" :total="40" :page-size="num" @current-change="pageChange"
                        :current-page="curPage">
                    </el-pagination>
                </div>
            </template>

            <!-- 德育分 -->
            <template class="form1" style="flex: 1;">
                <el-button class="add" style="background-color:blue;color: aliceblue; font-size: 16px;width: 120px;"
                    @click="addData">
                    +增添细项
                </el-button>
                <el-dialog style="width: 100%;height: 1000px;" title="增添细项" :visible.sync="dialogVisiable"
                    :show-close="false">
                    <el-form :model="form">
                        <!-- <el-form-item label="细项名称" width="80px">
                            <el-input class="dialog_input" v-model="form.xx_name"></el-input>
                        </el-form-item> -->
                        <el-form-item label="细项名称" width="80px">
                            <el-select class="dialog_input1" v-model="form.xx_name" placeholder="请选择">
                                <el-option label="基础分" value="基础分"></el-option>
                                <el-option label="附加分" value="附加分"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="内容说明" width="80px">
                            <el-input class="dialog_input2" v-model="form.content_sm"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                :before-remove="beforeRemove" multiple>
                                <el-button size="small" type="primary">上传证明材料</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="Dysubmit">确 定</el-button>
                        <el-button @click="dialogVisiable = false">取 消</el-button>
                    </div>
                </el-dialog>
                <h3 style="font-size: 15px;text-align: center;">“德育分”（20%）模块综合评定</h3>
                <el-table :data="DyData" border v-loading=false style="width:100%" :fit=false>
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xx_name" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="content_sm" label="内容说明" width="280">
                    </el-table-column>
                    <el-table-column prop="evi_mat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sug_score" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_self_score" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_bw_score" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_new_time" label="更新时间" width="100">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination layout="prev, pager, next" :total="40" :page-size="num" @current-change="pageChange"
                        :current-page="curPage">
                    </el-pagination>
                </div>
            </template>

            <!-- 体育分 -->
            <template class="form1" style="flex: 1;">
                <el-button class="add"
                    style="background-color:blue;color: aliceblue; font-size: 16px;display: flex;width: 120px;"
                    @click="addData">
                    +增添细项
                </el-button>
                <el-dialog style="width: 100%;height: 1000px;" title="增添细项" :visible.sync="dialogVisiable"
                    :show-close="false">
                    <el-form :model="form">
                        <!-- <el-form-item label="细项名称" width="80px">
                            <el-input class="dialog_input" v-model="form.xx_name"></el-input>
                        </el-form-item> -->
                        <el-form-item label="细项名称" width="80px">
                            <el-select class="dialog_input1" v-model="form.xx_name" placeholder="请选择">
                                <el-option label="基础分" value="基础分"></el-option>
                                <el-option label="附加分" value="附加分"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="内容说明" width="80px">
                            <el-input class="dialog_input2" v-model="form.content_sm"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                :before-remove="beforeRemove" multiple>
                                <el-button size="small" type="primary">上传证明材料</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="Tysubmit">确 定</el-button>
                        <el-button @click="dialogVisiable = false">取 消</el-button>
                    </div>
                </el-dialog>
                <h3 style="font-size: 15px;text-align: center;">“体育分”（10%）模块综合评定</h3>
                <el-table :data="TyData" border v-loading=false style="width:100%" :fit=false>
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xx_name" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="content_sm" label="内容说明" width="280">
                    </el-table-column>
                    <el-table-column prop="evi_mat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sug_score" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_self_score" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_bw_score" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_new_time" label="更新时间" width="100">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination layout="prev, pager, next" :total="40" :page-size="num" @current-change="pageChange"
                        :current-page="curPage">
                    </el-pagination>
                </div>
            </template>

            <!-- 劳育分 -->
            <template class="form1" style="flex: 1;">
                <el-button class="add" style="background-color:blue;color: aliceblue; font-size: 16px;width: 120px;"
                    @click="addData">
                    +增添细项
                </el-button>
                <el-dialog style="width: 100%;height: 1000px;" title="增添细项" :visible.sync="dialogVisiable"
                    :show-close="false">
                    <el-form :model="form">
                        <!-- <el-form-item label="细项名称" width="80px">
                            <el-input class="dialog_input" v-model="form.xx_name"></el-input>
                        </el-form-item> -->
                        <el-form-item label="细项名称" width="80px">
                            <el-select class="dialog_input1" v-model="form.xx_name" placeholder="请选择">
                                <el-option label="基础分" value="基础分"></el-option>
                                <el-option label="附加分" value="附加分"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="内容说明" width="80px">
                            <el-input class="dialog_input2" v-model="form.content_sm"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                :before-remove="beforeRemove" multiple>
                                <el-button size="small" type="primary">上传证明材料</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="Lysubmit">确 定</el-button>
                        <el-button @click="dialogVisiable = false">取 消</el-button>
                    </div>
                </el-dialog>
                <h3 style="font-size: 15px;text-align: center;">“劳育分”（5%）模块综合评定</h3>
                <el-table :data="LyData" border v-loading=false style="width:100%" :fit=false>
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xx_name" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="content_sm" label="内容说明" width="280">
                    </el-table-column>
                    <el-table-column prop="evi_mat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sug_score" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_self_score" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_bw_score" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_new_time" label="更新时间" width="100">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination layout="prev, pager, next" :total="40" :page-size="num" @current-change="pageChange"
                        :current-page="curPage">
                    </el-pagination>
                </div>
            </template>

            <!-- 美育分 -->
            <template class="form1" style="flex: 1;">
                <el-button class="add"
                    style="background-color:blue;color: aliceblue; font-size: 16px;display: flex;width: 120px;"
                    @click="addData">
                    +增添细项
                </el-button>
                <el-dialog style="width: 100%;height: 1000px;" title="增添细项" :visible.sync="dialogVisiable"
                    :show-close="false">
                    <el-form :model="form">
                        <!-- <el-form-item label="细项名称" width="80px">
                            <el-input class="dialog_input" v-model="form.xx_name"></el-input>
                        </el-form-item> -->
                        <el-form-item label="细项名称" width="80px">
                            <el-select class="dialog_input1" v-model="form.xx_name" placeholder="请选择">
                                <el-option label="基础分" value="基础分"></el-option>
                                <el-option label="附加分" value="附加分"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="内容说明" width="80px">
                            <el-input class="dialog_input2" v-model="form.content_sm"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                :before-remove="beforeRemove" multiple>
                                <el-button size="small" type="primary">上传证明材料</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="Mysubmit">确 定</el-button>
                        <el-button @click="dialogVisiable = false">取 消</el-button>
                    </div>
                </el-dialog>
                <h3 style="font-size: 15px;text-align: center;">“美育分”（5%）模块综合评定</h3>
                <el-table :data="MyData" border v-loading=false style="width:100%" :fit=false>
                    <el-table-column fixed prop="index" label="序号" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="xx_name" label="细项名称" width="120">
                    </el-table-column>
                    <el-table-column prop="content_sm" label="内容说明" width="280">
                    </el-table-column>
                    <el-table-column prop="evi_mat" label="证明材料" width="180">
                    </el-table-column>
                    <el-table-column prop="sug_score" label="建议评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_self_score" label="自评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_bw_score" label="班委评分" width="80">
                    </el-table-column>
                    <el-table-column prop="zy_new_time" label="更新时间" width="100">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination layout="prev, pager, next" :total="40" :page-size="num" @current-change="pageChange"
                        :current-page="curPage">
                    </el-pagination>
                </div>
            </template>
        </div>
    </div>

</template>

<script>
export default {
    name: 'Self_of_s',
    data() {
        return {
            dialogVisiable: false,
            form: {},
            loading: true,
            ZyData: [{

                xx_name: '智育基本分',
                content_sm: '学习成绩',
                evi_mat: '查看附件',
                sug_score: 4,
                zy_self_score: 100,
                zy_bw_score: 100,
                zy_new_time: '2021.10.10'
            },
            {

                xx_name: '智育基本分',
                content_sm: '学习成绩',
                evi_mat: '查看附件',
                sug_score: 4,
                zy_self_score: 100,
                zy_bw_score: 100,
                zy_new_time: '2021.10.10'
            },
            {

                xx_name: '智育基本分',
                content_sm: '学习成绩',
                evi_mat: '查看附件',
                sug_score: 4,
                zy_self_score: 100,
                zy_bw_score: 100,
                zy_new_time: '2021.10.10'
            },
            {

                xx_name: '智育基本分',
                content_sm: '学习成绩',
                evi_mat: '查看附件',
                sug_score: 4,
                zy_self_score: 100,
                zy_bw_score: 100,
                zy_new_time: '2021.10.10'
            }

            ],
            DyData: [{

                xx_name: '德育基本分',
                content_sm: '学习成绩',
                evi_mat: '查看附件',
                sug_score: 4,
                zy_self_score: 100,
                zy_bw_score: 100,
                zy_new_time: '2021.10.10'

            }
            ],
            TyData: [{

                xx_name: '体育基本分',
                content_sm: '学习成绩',
                evi_mat: '查看附件',
                sug_score: 4,
                zy_self_score: 100,
                zy_bw_score: 100,
                zy_new_time: '2021.10.10'

            }
            ],
            MyData: [{

                xx_name: '美育基本分',
                content_sm: '学习成绩',
                evi_mat: '查看附件',
                sug_score: 4,
                zy_self_score: 100,
                zy_bw_score: 100,
                zy_new_time: '2021.10.10'

            }
            ],
            LyData: [{

                xx_name: '劳育基本分',
                content_sm: '学习成绩',
                evi_mat: '查看附件',
                sug_score: 4,
                zy_self_score: 100,
                zy_bw_score: 100,
                zy_new_time: '2021.10.10'

            }
            ],
            num: 6,
            curPage: 1
        }
    },
    methods: {
        handleClick(row) {
            console.log(row)
        },
        pageChange(n) {
            this.curPage = n
        },
        addData() {
            this.form = {
                // id: '',
                name: '',
                date: '',
                // address: ''
            }
            this.dialogVisiable = true
        },
        Zysubmit() {
            // this.form.date = reformat(this.form.date); //日期类型转换
            this.ZyData.push(this.form) //向ZyData中添加数据
            this.dialogVisiable = false	//自定义对话框隐藏
        },
        Dysubmit() {
            // this.form.date = reformat(this.form.date); //日期类型转换
            this.DyData.push(this.form) //向DyData中添加数据
            this.dialogVisiable = false	//自定义对话框隐藏
        },
        Tysubmit() {
            // this.form.date = reformat(this.form.date); //日期类型转换
            this.TyData.push(this.form) //向TyData中添加数据
            this.dialogVisiable = false	//自定义对话框隐藏
        },
        Lysubmit() {
            // this.form.date = reformat(this.form.date); //日期类型转换
            this.LyData.push(this.form) //向LyData中添加数据
            this.dialogVisiable = false	//自定义对话框隐藏
        },
        Mysubmit() {
            // this.form.date = reformat(this.form.date); //日期类型转换
            this.MyData.push(this.form) //向MyData中添加数据
            this.dialogVisiable = false	//自定义对话框隐藏
        },
        // handleRemove(file, fileList) {
        //     console.log(file, fileList);
        // },
        // handlePreview(file) {
        //     console.log(file);
        // },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        submitData() {

        }
    }
}
</script>
        <!-- data(){
            return{
                content:"Hello world",
                sdata:''
            }
        },
        methods:{
            // getdata(){
            //     this.$axios.get('http://127.0.0.1/api/get').then(res=>{
            //         this.sdata = res.data
            //     })
            // },
            // postData(){
            //     this.$axios.post('http://127.0.0.1/api/post',{

            //     }).then(res=>{
            //         console.log(res);
            //     })

            // }
        }
    }

</script> -->
<style lang="less" scoped>
/* .demo .el-descriptions .el-descriptions__body .el-descriptions__table .el-descriptions-row td{
        width: 30% !important;
    } */
// div.h3{
//     text-align: center;
// }
.left {
    float: left;
    /* margin-top: 40px; */
}

.right {
    position: absolute;
    top: 6.5%;
    right: -66%;
    font-family: “Microsoft YaHei”;
}

.shenhe {
    width: 180px;
    height: 50px;
    font-size: 14px;
    /* background-color: rgb(243, 234, 234); */
    text-align: center;
    line-height: 50px;
    margin-bottom: 4px;
    border: 2px solid #ccc;
    /* box-shadow: 5px 5px 5px #ccc; */
}

.form1 {
    width: 100%;

}

.dialog_input2 {
    width: 31%;
}


.select_first {
    width: 150px;
    height: 30px;
    border: 1px solid #ccc;
    outline: medium
}

.rank {
    display: inline-block;
    padding: 4px;
    font-size: 14px;
    background-color: skyblue;
}

.add {
    /* position: absolute; */
    /* width: 10%; */
    height: 3.5%;
    margin-bottom: -45px;
    /* text-align: center; */
    /* font-size: 14px; */
    /* line-height: 40px; */
    /* margin-bottom: 4px; */
    /* border: 2px solid #ccc; */
    /* position: absolute;background-color:blue;color: aliceblue; font-size: 16px; margin-bottom: -40px; */
}
</style>
